
<!DOCTYPE HTML><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="images/splash/splash-icon-big.png">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" 	media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" href="images/splash/splash-screen-six.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="images/splash/splash-screen-six-plus.png" media="(device-width: 414px)">
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>

<title>Epsilon Mobile Framework - Version 2.0</title>

<link href="styles/style.css"     		 rel="stylesheet" type="text/css">
<link href="styles/framework.css" 		 rel="stylesheet" type="text/css">
<link href="styles/owl.theme.css" 		 rel="stylesheet" type="text/css">
<link href="styles/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="styles/font-awesome.css"	 rel="stylesheet" type="text/css">
<link href="styles/animate.css"			 rel="stylesheet" type="text/css">

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jqueryui.js"></script>
<script type="text/javascript" src="scripts/framework.plugins.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>

</head>
<body> 

<div id="preloader">
	<div id="status">
    	<p class="center-text">
			Loading the content...
            <em>Loading depends on your connection speed!</em>
        </p>
    </div>
</div>
    
       
<div class="all-elements">
    <div class="snap-drawers">
        <!-- Left Sidebar -->
        <div class="snap-drawer snap-drawer-left">
            <a href="index.html"><i class="fa fa-home"></i>Home</a>
            <a href="page-features.html" class="selected-item"><i class="fa fa-cog"></i>Features</a>
            <a href="page-media.html"><i class="fa fa-picture-o"></i>Media</a>
            <a href="page-blog.html"><i class="fa fa-pencil"></i>Blog</a>
            <a href="contact.html"><i class="fa fa-envelope-o"></i>Contact</a>
            <a href="#"><i class="fa fa-facebook"></i>Like Us</a>
            <a href="#"><i class="fa fa-twitter"></i>Follow Us</a>
            <a href="#"><i class="fa fa-google-plus"></i>Follow us</a>
            <a href="#" class="show-share-bottom"><i class="fa fa-retweet"></i>Share</a>
            <a href="#" class="sidebar-close"><i class="fa fa-times"></i>Close</a>
        </div>
    </div>
    
    <div class="header">
        <a href="#" class="main-logo"></a>
        <a href="#" class="open-menu"><i class="fa fa-navicon"></i></a>
        <a href="#" class="open-call"><i class="fa fa-phone"></i></a>
        <a href="#" class="open-mail"><i class="fa fa-envelope-o"></i></a>
        <a href="page-features.html" class="open-back"><i class="fa fa-chevron-left"></i></a>
    </div> 
    
    <a href="#" class="footer-ball"><i class="fa fa-navicon"></i></a>
    
    <!-- Page Content-->
    <div id="content" class="snap-content">        
        <div class="header-clear"></div>
        <div class="content">
            <a class="back-button" href="page-features.html"><i class="fa fa-chevron-left"></i> Back to Features</a>
            
            <div class="container no-bottom">
                <h3>jQuery</h3>
                <p>
                    Features that are vital to any template, easy to use and copy paste code. You can just copy and paste these features
                    into boxes or into repsonsive boxes! 
                </p>
            </div>
            <div class="decoration hide-if-responsive"></div>
            <div class="one-third-responsive">
                <!-- iOS Styled Toggles -->
                <div class="container switch-box">
                    <h4>iOS Style 1</h4>
                    <a href="#" class="switch switch-1 switch-1-on">
                        <em>I</em>
                        <span></span>
                        <em>0</em>
                    </a>
                    <em class="switch-box-subtitle">
                        Optional subtitle can be added here, this message automatically hides when the content is shown!
                    </em>
                    <div class="switch-box-content">
                        <p class="no-bottom">
                            Switches can be used as content toggles, where you can add almost every feature from the page inside of them.
                            We also provided the styles, so if you want you can even convert these to checkboxes. By default, they function
                            as content toggles! An extra style for your device!
                        </p>
                    </div>
                </div>

                <div class="container switch-box">
                    <h4>iOS Style 2</h4>
                    <a href="#" class="switch-icon switch-1 switch-1-on">
                        <em><i class="fa fa-times"></i></em>
                        <span></span>
                        <em><i class="fa fa-check"></i></em>
                    </a>
                    <em class="switch-box-subtitle">
                        Optional subtitle can be added here, this message automatically hides when the content is shown!
                    </em>
                    <div class="switch-box-content">
                        <p class="no-bottom">
                            Switches can be used as content toggles, where you can add almost every feature from the page inside of them.
                            We also provided the styles, so if you want you can even convert these to checkboxes. By default, they function
                            as content toggles! An extra style for your device!
                        </p>
                    </div>
                </div>

                <div class="container switch-box">
                    <h4>iOS Style 3</h4>
                    <a href="#" class="switch switch-1 switch-1-on">
                        <span></span>
                    </a>
                    <em class="switch-box-subtitle">
                        Optional subtitle can be added here, this message automatically hides when the content is shown!
                    </em>
                    <div class="switch-box-content">
                        <p class="no-bottom">
                            Switches can be used as content toggles, where you can add almost every feature from the page inside of them.
                            We also provided the styles, so if you want you can even convert these to checkboxes. By default, they function
                            as content toggles! An extra style for your device!
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="decoration hide-if-responsive"></div>
            
            <div class="one-third-responsive">
                <!-- Android Styled Toggle -->
                <div class="container switch-box">
                    <h4>Android Style 1</h4>
                    <a href="#" class="switch switch-2">
                        <span>
                            <em>I<br>O</em>
                        </span>
                    </a>
                    <em class="switch-box-subtitle">
                        Optional subtitle can be added here, this message automatically hides when the content is shown!
                    </em>
                    <div class="switch-box-content">
                        <p class="no-bottom">
                            Switches can be used as content toggles, where you can add almost every feature from the page inside of them.
                            We also provided the styles, so if you want you can even convert these to checkboxes. By default, they function
                            as content toggles! An extra style for your device!
                        </p>
                    </div>
                </div>

                <div class="container switch-box">
                    <h4>Android Style 2</h4>
                    <a href="#" class="switch switch-2">
                        <span>
                            <em><i class="fa fa-check"></i><br><i class="fa fa-plus"></i></em>
                        </span>
                    </a>
                    <em class="switch-box-subtitle">
                        Optional subtitle can be added here, this message automatically hides when the content is shown!
                    </em>
                    <div class="switch-box-content">
                        <p class="no-bottom">
                            Switches can be used as content toggles, where you can add almost every feature from the page inside of them.
                            We also provided the styles, so if you want you can even convert these to checkboxes. By default, they function
                            as content toggles! An extra style for your device!
                        </p>
                    </div>
                </div>

                <div class="container switch-box">
                    <h4>Android Style 3</h4>
                    <a href="#" class="switch switch-2">
                        <span></span>
                    </a>
                    <em class="switch-box-subtitle">
                        Optional subtitle can be added here, this message automatically hides when the content is shown!
                    </em>
                    <div class="switch-box-content">
                        <p class="no-bottom">
                            Switches can be used as content toggles, where you can add almost every feature from the page inside of them.
                            We also provided the styles, so if you want you can even convert these to checkboxes. By default, they function
                            as content toggles! An extra style for your device!
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="decoration hide-if-responsive"></div>

            <div class="one-third-responsive last-column">
                <!-- Windows / BlackBerry Styled Toggle -->
                <div class="container switch-box">
                    <h4>Win / BB Style 1</h4>
                    <a href="#" class="switch switch-3">
                        <strong></strong>
                        <span></span>
                        <em>I</em>
                        <em>O</em>
                    </a>
                    <em class="switch-box-subtitle">
                        Optional subtitle can be added here, this message automatically hides when the content is shown!
                    </em>
                    <div class="switch-box-content">
                        <p class="no-bottom">
                            Switches can be used as content toggles, where you can add almost every feature from the page inside of them.
                            We also provided the styles, so if you want you can even convert these to checkboxes. By default, they function
                            as content toggles! An extra style for your device!
                        </p>
                    </div>
                </div>

                <div class="container switch-box">
                    <h4>Win / BB Style 2</h4>
                    <a href="#" class="switch switch-3">
                        <strong></strong>
                        <span></span>
                        <em>+</em>
                        <em>-</em>
                    </a>
                    <em class="switch-box-subtitle">
                        Optional subtitle can be added here, this message automatically hides when the content is shown!
                    </em>
                    <div class="switch-box-content">
                        <p class="no-bottom">
                            Switches can be used as content toggles, where you can add almost every feature from the page inside of them.
                            We also provided the styles, so if you want you can even convert these to checkboxes. By default, they function
                            as content toggles! An extra style for your device!
                        </p>
                    </div>
                </div>

                <div class="container switch-box">
                    <h4>Win / BB Style 3</h4>
                    <a href="#" class="switch switch-3">
                        <strong></strong>
                        <span></span>
                    </a>
                    <em class="switch-box-subtitle">
                        Optional subtitle can be added here, this message automatically hides when the content is shown!
                    </em>
                    <div class="switch-box-content">
                        <p class="no-bottom">
                            Switches can be used as content toggles, where you can add almost every feature from the page inside of them.
                            We also provided the styles, so if you want you can even convert these to checkboxes. By default, they function
                            as content toggles! An extra style for your device!
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="decoration"></div>
            
            <div class="one-half-responsive">
                <div class="container half-bottom">
                    <h3>Checkboxes and Radios</h3>
                    <p>
                        Checkboxes are cute and important, we offer a few variety of styles! These are only templates
                        but you can add these classes to your radios and checkboxes.
                    </p>
                    <div class="one-half">
                        <a href="#" class="checkbox checkbox-one">Checkbox</a>
                        <a href="#" class="checkbox checkbox-two">Checkbox</a>
                        <a href="#" class="checkbox checkbox-three">Checkbox</a>
                        <a href="#" class="checkbox checkbox-one checkbox-one-checked">Checkbox</a>
                        <a href="#" class="checkbox checkbox-two checkbox-two-checked">Checkbox</a>
                        <a href="#" class="checkbox checkbox-three checkbox-three-checked">Checkbox</a>
                    </div>
                    <div class="one-half last-column">
                        <a href="#" class="checkbox radio-one">Radio</a>
                        <a href="#" class="checkbox radio-two">Radio</a>
                        <a href="#" class="checkbox checkbox-three">Checkbox</a>
                        <a href="#" class="checkbox radio-one radio-one-checked">Radio</a>
                        <a href="#" class="checkbox radio-two radio-two-checked">Radio</a>
                        <a href="#" class="checkbox checkbox-three checkbox-three-checked">Checkbox</a>
                    </div>
                </div>  
            </div>
            <div class="decoration hide-if-responsive"></div>
            <div class="one-half-responsive last-column">
                <div class="container">
                    <h3>Tabs</h3>
                    <p>Tabs are awesome, but having them plugin-less is more amazing!</p>
                    <div class="tabs">
                        <a href="#" class="tab-but tab-but-1 tab-active">Tab 1</a>
                        <a href="#" class="tab-but tab-but-2">Tab 2</a>
                        <a href="#" class="tab-but tab-but-3">Tab 3</a>
                        <a href="#" class="tab-but tab-but-4">Tab 4</a>     
                    </div>
                    <div class="tab-content tab-content-1">
                        <p>
                            <img src="images/pictures/1s.jpg" class="float-left" width="70" alt="img">
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                        </p>
                    </div>
                    <div class="tab-content tab-content-2">
                        <p>
                            <img src="images/pictures/2s.jpg" class="float-left" width="70" alt="img">
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.                    
                        </p>
                    </div>
                    <div class="tab-content tab-content-3">
                        <p>
                            <img src="images/pictures/3s.jpg" class="float-left" width="70" alt="img">
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.                    
                        </p>
                    </div>
                    <div class="tab-content tab-content-4">
                        <p>
                            <img src="images/pictures/4s.jpg" class="float-left" width="70" alt="img">
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.
                            Sed sed gravida turpis. Suspendisse quis lacus non lacus fermentum lobortis non et orci. Nullam bibendum non ligula ut viverra.                    
                        </p>
                    </div>       
                </div>      
            </div>

            <div class="decoration"></div>

            <div class="container no-bottom">
                <h3>Toggles and Dropdowns!</h3>
                <p>This is a huge set of awesomely CSS3 coded dropdowns and toggles!</p>
            </div>

            <div class="one-half-responsive">
                <div class="container">
                    <div class="submenu-navigation">
                        <a href="#" class="submenu-nav-deploy">Deploy Submenu</a>
                        <div class="submenu-nav-items">
                            <a href="#">Item 1</a>
                            <a href="#">Item 2</a>
                            <a href="#">Item 3</a>
                        </div>
                    </div>
                </div>

                <div class="container">
                    <div class="toggle-3">
                        <a href="#" class="deploy-toggle-3">This is content toggle<em><strong></strong></em></a>
                        <div class="toggle-content">
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                when an unknown printer took a galley of type and scrambled specimen book.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="one-half-responsive last-column">
                <div class="container">
                    <div class="toggle-1">
                        <a href="#" class="deploy-toggle-1">This is content toggle</a>
                        <div class="toggle-content">
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                when an unknown printer took a galley of type and scrambled specimen book.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="container">
                    <div class="toggle-2">
                        <a href="#" class="deploy-toggle-2">This is content toggle</a>
                        <div class="toggle-content">
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                                when an unknown printer took a galley of type and scrambled specimen book.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="decoration"></div>

            <div class="container no-bottom">
                <h3>Door sliders!</h3>
                <p>Try this for a great anti bot method! Interaction required!</p>

                <div class="one-half-responsive">
                    <div class="sliding-door">
                        <div class="sliding-door-top">
                            <a href="#"><em></em>
                                Tap to show number!
                            </a>
                        </div>    
                        <div class="sliding-door-bottom">
                            <a href="tel:+12 345 7890"><em></em>
                                <strong>Call us:</strong> 
                                +1 555 354 7890
                            </a>
                        </div>
                    </div>
                    <div class="sliding-door-clear"></div>
                </div>
                <div class="one-half-responsive last-column">

                    <div class="sliding-door">
                        <div class="sliding-door-top">
                            <a href="#"><em></em>
                                Tap to show email!
                            </a>
                        </div>    
                        <div class="sliding-door-bottom">
                            <a href="mailto:name@domain.com"><em></em>
                                <strong>Mail us:</strong> 
                                mail@domain.com
                            </a>
                        </div>
                    </div>
                    <div class="sliding-door-clear"></div>
                </div>
            </div> 

            <div class="decoration"></div>

            <div class="container no-bottom">
                <h3>Big notifications!</h3>
                <p>These notifications can be shown but they cannot be dismissed by tapping or closing!</p>
                <div class="one-half-responsive">
                    <div class="big-notification red-notification">
                        <h4 class="uppercase">Notification Title</h4>
                        <a href="#" class="close-big-notification">x</a>
                        <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
                    </div>
                    <div class="big-notification green-notification">
                        <h4 class="uppercase">Notification Title</h4>
                        <a href="#" class="close-big-notification">x</a>
                        <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
                    </div>
                </div>
                <div class="one-half-responsive last-column">
                    <div class="big-notification yellow-notification">
                        <h4 class="uppercase">Notification Title</h4>
                        <a href="#" class="close-big-notification">x</a>
                        <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
                    </div>
                    <div class="big-notification blue-notification">
                        <h4 class="uppercase">Notification Title</h4>
                        <a href="#" class="close-big-notification">x</a>
                        <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
                    </div>  
                </div> 
            </div> 

            <div class="decoration"></div>
            
        </div>
        <!-- Page Footer-->
        <div class="footer">
            <p class="center-text">Copyright 2015. All rights reserved.</p>
            <div class="footer-socials half-bottom">
                <a href="#" class="footer-facebook"><i class="fa fa-facebook"></i></a>
                <a href="#" class="footer-twitter"><i class="fa fa-twitter"></i></a>
                <a href="#" class="footer-transparent"></a>
                <a href="#" class="footer-share show-share-bottom"><i class="fa fa-share-alt"></i></a>
                <a href="#" class="footer-up"><i class="fa fa-angle-up"></i></a>
            </div>
        </div>      
    </div>
    
    <div class="share-bottom">
        <h3>Share Page</h3>
        <div class="share-socials-bottom">
            <a href="">
                <i class="fa fa-facebook facebook-color"></i>
                Facebook
            </a>
            <a href="">
                <i class="fa fa-twitter twitter-color"></i>
                Twitter
            </a>
            <a href="">
                <i class="fa fa-google-plus google-color"></i>
                Google
            </a>

            <a href="">
                <i class="fa fa-pinterest-p pinterest-color"></i>
                Pinterest
            </a>
            <a href="sms:">
                <i class="fa fa-comment-o sms-color"></i>
                Text
            </a>
            <a href="">
                <i class="fa fa-envelope-o mail-color"></i>
                Email
            </a>
        </div>
        <a href="#" class="close-share-bottom">Close</a>
    </div>
    
</div>

</body>

